<template>
	<view>
		<!-- 自定义顶部 -->
		<u-navbar style="background-color: #007AFF;" :is-back="false" title="开发票">
			<view class="slot-wrap">
				<u-icon name="arrow-left" style="margin-left: 10rpx;" @tap="getBack" size="45"></u-icon>
				<view class="coupons_left_line"></view>
				<u-icon name="home" @tap="home"  size="40"></u-icon>
			</view>
		</u-navbar>
		<!-- end -->
		<view class="biller padding25rpx dis">
			<view class="color66">可开票订单</view>
			<view class="colorff6" @click="show = true">订单筛选</view>
		</view>
		<view class="padding25rpx" style="padding-bottom: 180rpx;" v-if="list.length>0">
			<view class="marTop20 padding25rpx biller_card" @tap="biller(index,item)" v-for="(item, index) in list" :key="index">
				<view class="padding25rpx li">
					<u-radio-group  v-model="item.value" @change="radioGroupChange">
						<u-radio active-color="#fa782c" @change="radioChange" name="fdfs">
							<view class="dis">
								<label class="color66">{{item.time}}</label>
								<label v-if="item.static == 0" class="color66" style="position: absolute;right: 50rpx;">帮我送</label>
								<label v-if="item.static == 1" class="color66"  style="position: absolute;right: 50rpx;">帮我取</label>
								<label v-if="item.static == 2" class="color66"  style="position: absolute;right: 50rpx;">帮我买</label>
							</view>
						</u-radio>
					</u-radio-group>
				</view>
				<view class="flew marTop20 " style="display: flex;justify-content: center;">
					<image style="width: 32rpx; height: 32rpx;margin-right: 25rpx;" src="../../../../static/mine/qu.png"></image>
					<view>
						<view class="size35rpx color66">{{item.address}}</view>
						<view class="marTop10">
							<label class="size28rpx color33" style="margin-right: 25rpx;">{{item.username}}</label>
							<label class="color99">{{item.moblie}}</label>
						</view>
					</view>
				</view>
				<view class="flew marTop20 " style="display: flex;justify-content: center;">
					<image style="width: 32rpx; height: 32rpx;margin-right: 25rpx;" src="../../../../static/mine/shou.png"></image>
					<view>
						<view class="size35rpx color66">{{item.address}}</view>
						<view class="marTop10">
							<label class="size28rpx color33" style="margin-right: 25rpx;">{{item.username}}</label>
							<label class="color99">{{item.moblie}}</label>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else>
			<view class="center marTop90">
				<image class="queImgURL" src="../../../../static/mine/que.png"></image>
				<view class="marTop20 color99 size26rpx">暂无订单，快去下单吧</view>
			</view>
		</view>
		<!-- end -->
		<view class="biller_bottom padding25rpx dis atlin">
			<u-radio-group>
				<u-radio active-color="#fa782c">全选</u-radio>
			</u-radio-group>
			<view class="dis atlin" style="width: 55%;">
				<label class="color66 size28rpx">已选{{orderNumber || 0}}个订单</label>
				<button class="btnc" @click="tap">确认下单</button>
			</view>
		</view>
		<u-popup mode="bottom" 
			v-model="show" 
			close-icon-color="#333333" 
			height="70%" 
			border-radius="25"
			closeable="true"
			close-icon-size="45"
		>
			<view class="center li show">订单筛选</view>
			<view class="padding25rpx marTop20">
				<u-section title="下单时间" :arrow="false" :right="false" :showLine="false"></u-section>
				<view class="example-body marTop45">
					<view  class="uni-da center">
						<input style="height: 72rpx; width: 272rpx; background-color: #F4F4F4;" placeholder="起始时间"  v-model="lowest"/>
							<view class="" style="margin: 0 25rpx; width: 86rpx; height: 1rpx;background-color: #cccccc;"></view>
						<input  style="height: 72rpx; width: 272rpx; background-color: #F4F4F4;"  placeholder="终止时间"  v-model="tallest"/>
					</view>
				</view>
				<view class="marTop45">
					<u-section class="marTop45" title="开票金额范围(元)" :arrow="false" :right="false" :showLine="false"></u-section>
					<view class=" marTop20">
						<view  class="uni-da center">
							<input style="height: 72rpx; width: 272rpx; background-color: #F4F4F4;" placeholder="最低金额"  v-model="lowest"/>
								<view class="" style="margin: 0 25rpx; width: 86rpx; height: 1rpx;background-color: #cccccc;"></view>
							<input  style="height: 72rpx; width: 272rpx; background-color: #F4F4F4;"  placeholder="最高金额"  v-model="tallest"/>
						</view>
					</view>
				</view>
				<view class="marTop45">
					<u-section  title="订单类型" :arrow="false" :right="false" :showLine="false"></u-section>
					<view class="example-body marTop20 dis">
						<view class="biller-order"
							v-for="(item,index) in orderbtn" 
							:key="index"
							style=""
							@click="changeStyle(index)"
							:class="{active:ico == index }"
						>
						{{item.name}}
						</view>
					</view>
				</view>
				<view class="marTop45">
					<u-section  title="归属地" :arrow="false" :right="false" :showLine="false"></u-section>
					<view class="example-body marTop20">
						<view class="biller-order">
							{{city}}
						</view>
					</view>
				</view>
				<view class="dis biller-btn marTop90">
					<button @click="reset" class="reset">重置</button>
					<button class="reset">去开票</button>
				</view>
			</view>
			
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//订单数量
				orderNumber:'',
				//订单筛选
				show:false,
				list:[
					{time:'2021-04-12(周一) 19:36:26 ',value:'1',address:'花果园兰花广场 1306',static:0,username:'谢晓煜',moblie:'18386789001'},
					{time:'2021-04-12(周一) 19:36:26 ',value:'1',address:'花果园兰花广场 1306',static:2,username:'谢晓煜',moblie:'18386789001'},
					{time:'2021-04-12(周一) 19:36:26 ',value:'1',address:'花果园兰花广场 1306',static:1,username:'谢晓煜',moblie:'18386789001'},
					{time:'2021-04-12(周一) 19:36:26 ',value:'1',address:'花果园兰花广场 1306',static:1,username:'谢晓煜',moblie:'18386789001'},
				],
				//下单时间
				start_end:'',
				//订单类型
				orderbtn:[
					{name:'帮我送'},
					{name:'帮我取'},
					{name:'帮我买'}
				],
				city:'贵阳市',
				//最低金额
				lowest:'',
				//最高金额
				tallest:'',
				ico:0
			}
		},
		watch:{
			range(newval) {
				console.log('范围选:', this.range);
				this.start_end = this.range[0] + `-`+ this.range[1]
				console.log(this.start_end,'516513')
			}
		},
		methods: {
			//切换样式
			changeStyle(index) {
				console.log(index)
				this.ico = index
			},
			//去开发票
			biller(i,item){
				this.$mHelper.to('pages/mine/invoices/biller/index/index',true)
			},
			//确认下单
			tap(){
				
			},
			radioGroupChange(e){
				
			},
			radioChange(e){
				
			},
			//返回首页
			home(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			//返回上一页
			getBack(){
				this.$mHelper.back(1)
			},
		}
	}
</script>

<style scoped lang="scss">
	.active{
		background: red;
		color: red;
	}
	.uni-da {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 0 10px;
		border-radius: 4px;
		background-color: #fff;
		color: #666;
		font-size: 14px;
	}
	.reset{
		width: 46%;
	}
	.reset:last-child{
		background-color: #fa782c;
		color: #FFFFFF;
	}
	.biller-order{
		width: 202rpx;
		height: 72rpx;
		line-height: 72rpx;
		color: #999999;
		text-align: center;
		background-color: #F4F4F4;
	}
	.show{
		line-height: 100rpx;
		font-size: 45rpx;
	}
	.btnc{
		background: #fa782c;
		color: #FFFFFF;
		height: 80rpx;
		font-size: 30rpx;
		position: absolute;
		right: 35rpx;
	}
	.biller_bottom{
		height: 120rpx;
		line-height: 120rpx;
		background-color: #FFFFFF;
		z-index: 100;
		position: fixed;
		bottom: 0;
		width: 100%;
	}
	.biller_card{
		box-shadow: 0 4px 8px 0 rgba(121, 121, 121, 0.2);
		background-color: #FFFFFF;
	}
	.biller{
		box-shadow: 0 0 10rpx #e3e3e3;
		
		z-index: 100;
	}
</style>
